<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>演示：使用HTML5实现刮刮卡效果</title>
<style type="text/css">
.demo{width:320px; margin:10px auto 20px auto; min-height:300px;}
.msg{text-align:center; height:32px; line-height:32px; font-weight:bold; margin-top:50px}
</style>
</head>

<body>


<div id="main">
   
   
   <div class="demo">
   		<canvas id="myCanvas"></canvas>
   </div>
</div>

<script type="text/javascript">


    var img = new Image();
//    var canvas = document.querySelector('canvas');
    var canvas = document.getElementById("myCanvas");

    //设置画布的背景颜色为透明，然后
    canvas.style.backgroundColor='transparent';
//    canvas.style.position = 'absolute';
    var imgs = ['p_0.jpg','p_1.jpg'];
    var num = Math.floor(Math.random()*2);
    img.src = imgs[num];

    img.addEventListener('load', function(e) {
        var ctx;
        var w = img.width,h = img.height;

        var offsetX = canvas.offsetLeft,offsetY = canvas.offsetTop;

//        alert("offsetX ： " + offsetX);
//        alert("offsetY ： " + offsetY);

        var mousedown = false;

        //给画布添加gray背景
        function layer(ctx) {
            ctx.fillStyle = 'gray';
            ctx.fillRect(0, 0, w, h);
        }

        function eventDown(e){
            e.preventDefault();
            mousedown=true;
        }

        function eventUp(e){
            e.preventDefault();
            mousedown=false;
        }

        function eventMove(e){
            e.preventDefault();
            if(mousedown) {
                if(e.changedTouches){
                    e=e.changedTouches[e.changedTouches.length-1];
                }
                var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0,
                        y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;


//                var x = e.clientX ,
//                        y = e.clientY;
//                alert(x);
//                alert(y);

                with(ctx) {
                    beginPath();
                    arc(x, y, 10, 0, Math.PI * 2);
                    fill();
                }
            }
        }

        //将图片的高度和宽度与canvas保持一致
        canvas.width=w;
        canvas.height=h;

        //是否中奖的图片作为画布的背景色
        canvas.style.backgroundImage='url('+img.src+')';

        //在画布中画一个矩形，高度和宽度与图片一致
        ctx=canvas.getContext('2d');
        ctx.fillStyle='transparent';
        ctx.fillRect(0, 0, w, h);

        layer(ctx);

        ctx.globalCompositeOperation = 'destination-out';

        //给画布添加touch 和 mouse 事件
        canvas.addEventListener('touchstart', eventDown);
        canvas.addEventListener('touchend', eventUp);
        canvas.addEventListener('touchmove', eventMove);
        canvas.addEventListener('mousedown', eventDown);
        canvas.addEventListener('mouseup', eventUp);
        canvas.addEventListener('mousemove', eventMove);
    });


</script>

</body>
</html>